<template>
	<div class="side-bar">
		<el-menu
			class="el-menu-vertical-demo"
			:unique-opened="true"
			:collapse="setting.getCollapse"
			:background-color="menuBColor"
			:text-color="menuTColor"
			:active-text-color="menuATColor"
			:router="true"
			:default-active="menu.routePath.path"
			@open="handleOpen"
			@close="handleClose"
		>
			<template v-for="(item, index) in menuList" :key="index">
				<el-sub-menu v-if="item.children !== null" :index="item.path">
					<template #title>
						<i :class="'iconfont icon-' + item.icon"></i>
						<span slot:title>{{ item.menuName }}</span>
					</template>
					<el-menu-item-group v-for="(iitem, iindex) in item.children" :key="iindex">
						<el-menu-item :index="iitem.path" @click="menuItemSelect(item, iitem)">
							<i :class="'iconfont icon-' + iitem.icon"></i>
							<span slot:title>{{ iitem.menuName }}</span>
						</el-menu-item>
					</el-menu-item-group>
				</el-sub-menu>
				<el-menu-item v-else :index="item.path">
					<i :class="'iconfont icon-' + item.icon"></i>
					<span slot:title>{{ item.menuName }}</span>
				</el-menu-item>
			</template>
		</el-menu>
	</div>
</template>

<script setup>
import { userStore, settingStore, menuStore } from '@/store';
import { reactive, ref } from 'vue';

const store = userStore();
const setting = settingStore();
const menu = menuStore();

const menuBColor = ref('#545c64');
const menuATColor = ref('#4cf4ed');
const menuTColor = ref('#fff');

let menuList = ref([]);

store.getMenuList().then((res) => {
	menuList.value = res.page;
});

const handleOpen = (key, keyPath) => {
	console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
	console.log(key, keyPath);
};
const menuItemSelect = (item, iitem) => {
	const breadList = reactive([
		{
			path: '/',
			name: '首页',
		},
		{
			path: '',
			name: item.menuName,
		},
		{
			path: '',
			name: iitem.menuName,
		},
	]);
	const routePath = {
		path: iitem.path,
		name: item.menuName + '-' + iitem.menuName,
	};
	menu.setTabList(routePath);
	menu.setBreadList(breadList);
	menu.setRoutePath(routePath);
};
</script>

<style lang="scss" scoped>
@import '@/assets/common/variables.scss';
.side-bar {
	height: 100%;
	::deep .el-menu {
		font-size: 10px;
	}
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
	width: $sideBarWidth;
	min-height: 100%;
}
.el-menu--collapse {
	display: block;
	height: 100%;
}
.iconfont {
	margin-right: 10px;
}
</style>
